<template>
  <div class="pending-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="16">
        <template v-if="hasSelected">
          <div class="summary-item summary-item-text">
            开票金额：
            <span class="summary-value">{{ totalAmount }}</span>
            元
          </div>
          <el-select
            v-model="subjectId"
            class="summary-item"
            placeholder="请选择开票科目"
            filterable
          >
            <el-option
              v-for="subject in subjects"
              :key="subject.id"
              :value="subject.id"
              :label="subject.subject_name"
            />
          </el-select>
          <el-select
            v-model="month"
            class="summary-item summary-item-month"
            placeholder="请选择开票月份"
          >
            <el-option value="本月" />
            <el-option value="次月" />
          </el-select>
          <el-button
            icon="el-icon-check"
            type="primary"
            :disabled="!subjectId || !month"
            @click="submit"
          >
            确认开票
          </el-button>
        </template>
        <template v-else>
          请选择开票项目
          <span class="tip-hl">
            （请注意：每月一万元以下发票只允许开一张，一万元以上不限制）
          </span>
        </template>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel :span="8">
        <el-form inline @submit.native.prevent>
          <el-form-item>
<!--            <el-input
              v-model.trim="queryForm.keyword"
              placeholder="请输入供应商名称"
              clearable
            />-->
            <el-select
              v-model="subjectId2"
              class="summary-item"
              placeholder="选择开票类型"
              clearable
              filterable
              style="width:150px;margin-left: 10px;"
            >
              <el-option
                v-for="subject in subjects2"
                :key="subject.id"
                :value="subject.id"
                :label="subject.subject_name"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="search">
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>

    <el-table
      v-loading="listLoading"
      ref="multipleTable"
      :data="list"
      @selection-change="handleSelectionChangess"
      @expand-change="handleSelectionChange"
    >
      <el-table-column
        width="55"
        type="selection"
        align="center"
        >
      </el-table-column>

      <el-table-column type="expand">
        <template #default="{ row, $index }">
          <el-table
            :data="row.children"
            class="subtable"
            border
          >
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="项目名称"
              prop="activity_name"
            />
            <el-table-column
            align="center"
            show-overflow-tooltip
            label="供应商名称"
            prop="supplier_name"
          />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="细项"
              prop="detail"
            />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="细项类别"
              prop="project_category"
            />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="数量"
              prop="number"
            />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="单价"
              prop="price"
            />
            <el-table-column
              align="center"
              show-overflow-tooltip
              label="小计"
              prop="subtotal"
            />
          </el-table>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        show-overflow-tooltip
        label="序号"
        type="index"
        width="95"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="create_time"
        label="创建时间"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        label="支付类型" >
        <template #default="{ row }">
          <div> {{row.jd_jl_type === 2?'服务费':'专票业务'}}</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="subtotal"
        label="付款金额"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="servicetotal"
        label="服务费总额"
      />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="all_money"
        label="可开票总金额"
      />
    </el-table>

    <el-pagination
      background
      :current-page="queryForm.page"
      :page-size="queryForm.list_row"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
  import { getPendingList, getSubjectList, submitRequest,getBillingLists,getBillingNextLists } from '@/api/invoice'
  import {getPendingDetailList} from "@/api/payment";

  export default {
    name: 'InvoicePending',

    data() {
      return {
        isDc: '',
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        queryForm: {
          page: 1,
          list_row: 10,
          keyword: '',
          type:0
        },
        selectedRows: [],
        subjects: [], // 开票科目
        subjects2:[{
          id: 1,
          subject_name: "专票业务"
        },{
            id: 2,
            subject_name: "服务费"
          }],
        subjectId: null,
        subjectId2: null,
        month: '本月',
        is_sel:true,
      }
    },

    computed: {
      hasSelected() {
        return this.selectedRows.length > 0
      },
      totalAmount() {
        return this.selectedRows
          .map((row) => Number(row.total_money))
          .reduce((sum, num) => sum + num, 0)
          .toFixed(2)
      },
    },

    created() {
      this.getList()
      this.initSubjects()
    },

    methods: {
      async getList() {
        this.listLoading = true
        const { data, total } = await getBillingLists(this.queryForm)

        this.list = data.map((item) => ({
          ...item,
          children: [],
          selection: [],
        }))
        console.log(3333,this.list)
        //this.list = data
        this.total = total
        this.listLoading = false
      },
      handleSizeChange(val) {
        this.queryForm.list_row = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getList()
      },
      search() {
        this.queryForm.type = this.subjectId2;
        console.log(22222,this.queryForm)
        this.queryForm.page = 1
        this.getList()
      },
      handleSelectionChangess(rows) {
        this.selectedRows = rows
      },
      async handleSelectionChange(row) {
        console.log(222,row)
        const supplierId = row.id
        const { data } = await getBillingNextLists({
          id: supplierId,
          page: 1,
          list_row: 99999,
        })
        row.children = data.map((item) => ({
          ...item,
          // is_check 字段: 1-可以点击, 2-不能点击, 需要上传材料
         // has_checks: item.is_check === 1,
        }))
      },
      submit() {
        this.$confirm('确定提交开票申请?', { type: 'warning' }).then(
          async () => {
            const ids = this.selectedRows.map((row) => row.id).join()
            const data = {
              confirm_payment_id: ids,
              subject_id: this.subjectId,
              billing_date: this.month,
            }
            await submitRequest(data)
            this.$message({ message: '提交申请成功', type: 'success' })
            this.resetQuery()
            this.$router.push('/invoiceRequest')
          },
        )
      },
      initSubjects() {
        getSubjectList().then((res) => {
          this.subjects = res
        })
      },
      resetQuery() {
        this.getList()
        this.subjectId = null
        this.month = '本月'
      },
    },
  }
</script>

<style lang="scss" scoped>
  ::v-deep .vab-query-form .left-panel > .el-button {
    margin: 0 !important;
  }

  .summary-item {
    display: flex;
    align-items: center;
    margin-right: 10px;
  }

  .summary-item-text {
    margin-right: 20px;
  }

  .summary-item-month {
    width: 100px;
  }

  .summary-value {
    margin-right: 4px;
    font-size: 18px;
    font-weight: bold;
    color: #000;
  }

  .tip-hl {
    font-weight: bold;
    color: #f56c6c;
  }
</style>
<style>
html body .el-table.subtable th,
html body[class*='vab-theme-'] .el-table.subtable th {
  background: #fff;
}

.el-table--border.subtable td:first-child .cell {
  padding-left: 14px !important;
}

html body .el-table.subtable td .cell,
html body .el-table.subtable th .cell,
html body[class*='vab-theme-'] .el-table.subtable td .cell,
html body[class*='vab-theme-'] .el-table.subtable th .cell {
  font-size: 12px;
}
.el-table__expand-icon > .el-icon{
  margin-top: -10px!important;
}
.el-table__expand-icon > .el-icon-arrow-right{
  font-size: 20px!important;
  line-height: 20px;
}
.el-table__expand-icon{
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

.el-table__expand-icon
.el-icon-arrow-right:before{
  content: "\e7a0";
  color: #1890ff;
}
.el-table__expand-icon--expanded
.el-icon-arrow-right:before{
  content: "\e7a2";
  color: #1890ff;
}
</style>
